<template>
  <div>
    <!-- 搜索组件1 myInput -->
    <myInput @searchfun="searchfun" @parentopendialog="parentopendialog" />
    <!-- 表格组件2 myTable -->
    <myTable @updateOpenDialog="updateOpenDialog" :arr="arr" @resetTraffic="initGetTraffic" />
    <!-- 分页组件3 myPage -->
    <div style="height:92px;">
      <myPage
      @changePage="changePage"
      @changepageSize="changepageSize"
      :page="page"
      :pageSize="pageSize"
      :pageSizes="pageSizes"
      :total="total"
    />
    </div>
    
    <!-- 弹框组件 -->
    <myDialog
      :btnType="btnType"
      :row="row"
      @resettable="initGetTraffic"
      @parentclosedialog="parentclosedialog"
      v-if="show"
    />
  </div>
</template>

<script>
import myInput from "./components/myInput.vue";
import myTable from "./components/myTable.vue";
import myPage from "./components/myPage.vue";
import { getTrafficApi } from "../../api/trafficApi";
import myDialog from "./components/myDialog.vue";
export default {
  components: {
    myPage,
    myTable,
    myInput,
    myDialog
  },
  data() {
    return {
      arr: [],
      keywordname: "",
      keywordnum: "",
      page: 1, //当前页码
      pageSize: 20, //每页显示几条数据
      pageSizes: [20, 40, 60, 80, 100],
      total: 0,
      show: false,
      row: "", //编辑的当前行数据
      btnType: 0 //0是新增 1是修改
    };
  },
  mounted() {
    this.initGetTraffic();
  },
  methods: {
    // 修改
    updateOpenDialog(row) {
      this.row = row;
      this.btnType = 1;
      this.show = true;
    },
    parentclosedialog() {
      this.show = false;
    },
    parentopendialog() {
      //新增 打开弹框
      this.show = true;
      this.row = {};
      this.btnType = 0;
    },
    changePage(val) {
      //控制页码
      this.page = val;
      this.initGetTraffic();
    },
    changepageSize(val) {
      //控制pageSize切换
      this.pageSize = val;
      this.initGetTraffic();
    },
    searchfun(name, num) {
      this.keywordname = name;
      this.keywordnum = num;
      this.initGetTraffic();
    },
    initGetTraffic() {
      getTrafficApi({
        keywordname: this.keywordname,
        keywordnum: this.keywordnum,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        console.log("res", res);
        if (res.code == 200) {
          this.arr = res.data;
          this.total = res.total;
        }
      });
    }
  }
};
</script>

<style>
</style>